<template>
  <div style="padding: 20px">
    <item-title title="考察类型" :borderShow="false"/>
    <div >
      <el-form  style="width: 100%; display: flex;justify-content: space-between;"
        ref="queryForm"
        :model="queryForm"
        :inline="true"
        label-width="68px"
      >
        <div>
          <el-form-item label="">
            <el-input
              v-model="queryForm.name"
              placeholder="请输入考察类型名称"
              style="width: 400px"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleQuery"
              >查询
            </el-button>
          </el-form-item>
        </div>
        <div style="float: right">
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="addType" 
              >添加考察类型</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-table :data="data" size="medium" border>
      <el-table-column prop="inspect_type_name" label="考察类型名称" align="center"></el-table-column>
      <el-table-column label="操作" 
            align="left"
            header-align="center"
            width="180">
        <template slot-scope="scope">
          <el-button  type="text" size="meduim" @click="editItem(scope.row)"
                  >编辑
          </el-button>
          <el-button
            class="text-btn-red"
            type="text"
            size="meduim"
            @click="deleteItem(scope.row, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination style="display:flex;justify-content:flex-end;" :total="total"
          :page.sync="pages.pageNum" :limit.sync="pages.pageSize" @pagination="pagination" />
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="考察类型名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入考察类型名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="handleClose">取消</el-button>
         <el-button plain v-if="title == '添加考察类型'" @click="cSubmitForm"
          >保存并继续添加</el-button
        >
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>      
  </div>
</template>

<script>
import {investigationList,createInvestigation,updateInvestigation,deleteInvestigation} from "@/api/stability";
export default {
  components: {
    Investigation: () => import("../model/investigation"),
  },
  data() {
    let name = (rule, value, callback) => {
      if (this.form.name != '') {
        if(this.form.name.split(" ").join("").length == 0){
          callback(new Error("考察类型名称不能全是空格"));
        }else{
          callback();
        }
      } else {
        callback(new Error("考察类型名称不能为空"));
      }
    };
    return {
      title:'添加考察类型',
      open:false,
      pages:{
        pageNum:1,
        pageSize:10

      },
      total:0,
      form:{
        name:''
      },
      rules:{
        name: [
          { required: true, validator: name, trigger: "blur" },
        ],
      },
      queryForm: {
        name: "",
      },
      current: null,
      isEdit: false,
      data: [
       
      ],
      i:null,
      disabled:false,
      created_at: "",
      creator_id: "",
      creator_name: "",
      deleted_at: "",
      id: "",
      updated_at: ""
    };
  },
  created() {
    this.getList()
  },
  methods: {
    pagination(val) {
      this.pages.pageSize = val.limit;
      this.pages.pageNum = val.page;
      this.getList();
    },
    getList(){
      let data ={
        name:this.queryForm.name,
        pager:{
          limit:this.pages.pageSize,
          skip:this.pages.pageNum
        }
      }
      investigationList(data).then(res=>{
        if(res.code==200){
          console.log(res.data)
          this.data = res.data.data
          this.total = res.data.total
        }
      })
    },
    handleClose() {
        this.open = false
        this.form.name =''
    },
    cSubmitForm(){
       this.$refs.form.validate((valid) => {
        if (valid) {
          let data = {
              inspect_type_name:this.form.name
            }
            createInvestigation(data).then(res=>{
              if(res.code==200){
                this.$message.success('创建成功')
                this.form.name =''
                this.getList()
              }else{
                this.$message.error(res.msg)
              }
            })
        }
       })
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if(this.title=="添加考察类型"){
            let data = {
              inspect_type_name:this.form.name
            }
            createInvestigation(data).then(res=>{
              if(res.code==200){
                this.$message.success('创建成功')
                this.open = false
                this.form.name =''
                this.getList()
              }else{
                this.$message.error(res.msg)
              }
            })
          }else{
            let data = {
              id:this.id,
              created_at: this.created_at,
              creator_id: this.creator_id,
              creator_name: this.creator_name,
              deleted_at: this.deleted_at,
              updated_at: this.updated_at,
              inspect_type_name:this.form.name
            }
            updateInvestigation(data).then(res=>{
              if(res.code==200){
                this.$message.success('编辑成功')
                this.open = false
                this.form.name =''
                this.getList()
              }else{
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    },
    handleQuery() {
      this.pages={
        pageNum:1,
        pageSize:10
      },
      this.getList()
    },
    handleNodeClick(data) {},
    addType() {
     this.open = true
     this.title = "添加考察类型"
    },
     deleteItem(row,index){
       this.$confirm("是否确认删除 " + row.inspect_type_name + " ?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
            deleteInvestigation(row.id).then(res => {
              if(res.code==200){
                this.$message.success('删除成功')
                this.getList()
              }else{
                this.$message.error(res.msg)
              }
            });
        })
        .catch(function() {});
    },
    editItem(row){
      console.log(row)
     this.open = true
     this.title = "编辑考察类型"
     this.created_at=row.created_at
     this.creator_id=row.creator_id
     this.creator_name=row.creator_name
     this.deleted_at=row.deleted_at
     this.id=row.id
     this.updated_at=row.updated_at
     this.form.name = row.inspect_type_name
    },
  },
};
</script>
<style lang="scss">
.c{
    justify-content: space-between;
}
</style>